<!--  -->
<template>
  <view class="app-page">
    <view
      class="navbar"
      :style="{
        height: `${statusBarHeight + titleBarHeight}px`,
        backgroundColor: transparent,
      }"
    >
    </view>
    <!--<image v-if="agreeInfo.id==2" mode="heightFix" class="article-bg" src="../../images/article-bg.png" /> -->
    <view v-if="agreeInfo.id == 2" class="flag">
      借条签署一站式
      <text>财产安全有保障</text>
    </view>
    <view v-if="agreeInfo.title" class="article">
      <view :class="agreeInfo.id == 2 ? 'title1' : 'title'">
        {{ agreeInfo.title }}
      </view>
      <view class="content">
        <rich-text :nodes="agreeInfo.content" @click="tap"></rich-text>
      </view>
    </view>
  </view>
</template>

<script>
import { apiArticleById } from "@/api/common";
export default {
  components: {},
  data() {
    return {
      statusBarHeight: 0,
      titleBarHeight: 0,
      transparent: "transparent",
      agreeInfo: {
        title: "",
        content: "",
        type: "0",
      },
    };
  },
  onLoad(options) {
    uni.hideShareMenu();
    const _this = this;
    uni.getSystemInfo({
      success: (res) => {
        _this.statusBarHeight = res.statusBarHeight; //状态栏高度
        _this.titleBarHeight = res.titleBarHeight; //标题栏高度
      },
    });
    const { type, id } = options;
    _this.getData(id, type);
  },
  methods: {
    onPageScroll(e) {
      const { scrollTop } = e;
      if (scrollTop > 10) {
        this.transparent = "#fff";
      } else {
        this.transparent = "transparent";
      }
    },
    getData(id) {
      apiArticleById({
        articleIdList: id,
      }).then((res) => {
        if (res.code === 200 && res.data && res.data.length > 0) {
          this.agreeInfo = {
            id: id,
            title: res.data[0].articleTitle,
            content: res.data[0].articleDetails,
          };
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-page {
  width: 750rpx;
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(180deg, #94cefd 0%, #cae7ff 46%, #eef7ff 100%);
  box-sizing: border-box;
  padding-top: 104px;
  padding-bottom: 48rpx;
}

.navbar {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
}

.article-bg {
  width: 100%;
  height: 882rpx;
  position: absolute;
  left: -70rpx;
  top: 222rpx;
  z-index: 1;
}

.flag {
  font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
  font-weight: bold;
  font-size: 36rpx;
  color: #1677ff;
  line-height: 50rpx;
  text-align: left;
  font-style: normal;
  padding: 12rpx 48rpx 48rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.flag text {
  color: #333333;
}

.article {
  width: 694rpx;
  background: #ffffff;
  border-radius: 16rpx;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.article .title1 {
  display: inline-block;
  font-family: PingFangSC, PingFang SC;
  font-size: 30rpx;
  color: #ffffff;
  line-height: 42rpx;
  font-weight: 500;
  text-align: left;
  font-style: normal;
  background: linear-gradient(49deg, #1677ff 0%, #224dfe 100%);
  border-radius: 0rpx 0rpx 16rpx 16rpx;
  padding: 17rpx 38rpx 21rpx;
  margin: auto auto 24rpx;
  box-sizing: border-box;
}

.article .title {
  display: inline-block;
  font-family: PingFangSC, PingFang SC;
  font-size: 30rpx;
  color: #333333;
  font-weight: bold;
  line-height: 42rpx;
  text-align: left;
  font-style: normal;
  border-radius: 0rpx 0rpx 16rpx 16rpx;
  padding: 17rpx 38rpx 0;
  box-sizing: border-box;
}

.article .content {
  width: 100%;
  padding: 0 24rpx 24rpx;
  box-sizing: border-box;
}
</style>
